<template>
  <div class="allpage">
    <el-form
      :inline="true"
      :model="formInline"
      label-width="80px"
      class="form-style"
      ref="formInline"
    >
      <el-row style="border-bottom: 1px solid #eeeeee">
        <el-col :span="3">
          <el-form-item style="margin: 10px 0 10px 5px">{{
            formInline.SalesManName
          }}</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item style="margin: 10px auto">
            <el-button @click="choose" icon="el-icon-circle-plus"
              >选择团长</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="time" style="margin: 10px auto">
            <el-date-picker
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              v-model="formInline.startTime"
              type="date"
              placeholder="选择开始日期"
              @change="getSTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="time" style="margin: 10px auto">
            <el-date-picker
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              v-model="formInline.endTime"
              type="date"
              placeholder="选择结束日期"
              @change="getTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="region" style="margin: 10px 0 10px 15px">
            <el-select placeholder="请选择供应商" v-model="formInline.region">
              <el-option
                v-for="(tbitem, tbindex) in options"
                :key="tbindex"
                :label="tbitem.SupplierName"
                :value="tbitem.SupplierId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="margin: 10px 10px">
            <el-button
              icon="el-icon-refresh"
              type="warning"
              @click="clean('formInline')"
              >重置</el-button
            >
            <el-button icon="el-icon-search" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button
            style="margin: 10px 30px"
            icon="el-icon-document"
            size="medium"
            type="success"
            @click="exportExcel"
            >导出报表</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <div class="table-style">
      <el-form :inline="true" :model="form">
        <el-form-item
          style="color: red; margin: 10px 0 0 20px"
          label="销售总额："
          >$2000</el-form-item
        >
        <el-form-item
          style="color: red; margin: 10px 0 0 20px"
          label="订单总数："
          >20</el-form-item
        >
        <el-form-item
          style="color: red; margin: 10px 0 0 20px"
          label="小龙直营提成总额："
          >$200.00</el-form-item
        >
        <el-form-item
          style="color: red; margin: 10px 0 0 20px"
          label="平台服务费总额："
          >$20.00</el-form-item
        >
      </el-form>
      <el-table border="" :data="tableData" id="out-table">
        <el-table-column
          label="排名"
          prop="Number"
          width="50"
        ></el-table-column>
        <el-table-column label="团长">
          <template slot-scope="scope">
            <p>{{ scope.row.GroupBuyTrueName }}</p>
            <p>-</p>
          </template>
        </el-table-column>
        <el-table-column label="销售总额">
          <template slot-scope="scope">
            <span style="color: red">￥{{ scope.row.AllCurrentPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="WorkPrice" label="订单数量"></el-table-column>
        <el-table-column label="平台收佣金额">
          <template slot-scope="scope">
            <span>￥{{ scope.row.BCommission }}</span>
          </template>
        </el-table-column>
        <el-table-column label="小龙直营提成金额" width="150">
          <template slot-scope="scope">
            <span>￥{{ scope.row.zytc }}-</span>
          </template>
        </el-table-column>
        <el-table-column prop="tuan" label="拉新团长数">-</el-table-column>
        <el-table-column prop="fen" label="分销员数量">-</el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            -
            <div>
              <span v-show="scope.row.state === 0" style="color: green"
                >正常</span
              >
              <span v-show="scope.row.state === 1" style="color: orange"
                >冻结</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
    </div>

    <tuanbao-dialog
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      @getusername="getSalesManName"
    />
    <!-- :formData="formInline" -->
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import TuanbaoDialog from "./TuanbaoDialog";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import axios from "axios";
import {
  OrderFinanceToExcelApi,
  LoadSuppliers,
  OrderFinanceToExcelAPI,
} from "@/request/api";
export default {
  components: {
    Botpage,
    TuanbaoDialog,
  },
  data() {
    return {
      form: {},
      userId: "",
      dialogTitle: "",
      dialogFormVisible: false,
      tableData: [],
      formInline: {},
      currentPage: 1,
      PageSize: 10,
      total: 1,
      options: [],
      base: "http://gbtest.xiniuauto.com/",
    };
  },
  created() {
    this.getTableDatas();
    this.getSelect();
  },
  methods: {
    getTableDatas() {
      OrderFinanceToExcelApi({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        ScreenValues: 0,
        User: this.userId,
        StartTime: this.formInline.startTime,
        EndTime: this.formInline.endTime,
        SupplierId : this.formInline.region //can't
      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
    //导出报表
    exportExcel() {
      this.search();
      axios({
        method: "post",
        url: this.base + "api/Adm_Order/Adm_OrderFinanceToExcel",
        data: {
          GBNumber: 0,
          OtherValues: 1,
          User : this.userId,
          StartTime: this.formInline.startTime,
          EndTime: this.formInline.endTime,
        },
      })
        .then((response) => {
          const content = response.data.Data;
          if(content){
            window.location.href = this.base + content
          }else{
            this.$message({
              type: 'warning',
              message: '暂无数据'
            })
          }
        })
        .catch((error) => {});
    },
    getSelect() {
      LoadSuppliers()
        .then((res) => {
          this.options = res.Data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search(row) {
      this.getTableDatas();
    },
    choose() {
      this.dialogFormVisible = true;
      this.dialogTitle = "选择团长";
      // this.formInline = {};
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableDatas()
    },
    check() {
      console.log("sdad");
    },
    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if (reload === "reload") {
        this.getTableDatas();
      }
    },
    getSTime(val) {
      this.formInline.startTime = val;
      console.log(this.formInline.startTime);
    },
    getTime(val) {
      this.formInline.endTime = val;
      console.log(this.formInline.endTime);
    },
    getSalesManName(msg, id) {
      console.log(msg + "-------------------");
      console.log(id + "-------------------");
      this.userId = id;
      this.formInline.SalesManName = msg;
    },
  },
};
</script>

<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
</style>
